<template>
  <div class="analysis-panel">
    <div class="analysis-item" v-for="item in analysisItem" :key="item.key" @click="handleItem(item)">
      <img :src="item.image" alt="">
      <div class="analysis-item-text">
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import zsfxIcon from "@/views/twinScreen/images/zsfx.png";
import clfxIcon from "@/views/twinScreen/images/clfx.png";
import zzmjfxIcon from "@/views/twinScreen/images/zzmjfx.png";

export default {
  name: 'analysis',
  components: {},
  data() {
    return {
      zsfxIcon,
      clfxIcon,
      zzmjfxIcon,
      analysisItem: [
        {image: zsfxIcon, key: 'zsfx', name: '长势分析'},
        {image: clfxIcon, key: 'clfx', name: '产量分析'},
        {image: zzmjfxIcon, key: 'zzmjfx', name: '种植面积分析'},
      ],
      isZoneMode: 0,
    }
  },
  created() {
  },
  methods: {
    handleItem(item) {
      if (item.key === 'zzmjfx') {
        this.isZoneMode = this.isZoneMode === 0 ? 1 : 0;
        window.KCDT.switchPlantingAreaAnalysis(this.isZoneMode);
      }
    }
  }
}
</script>
<style scoped lang="scss">
.analysis-panel {
  position: absolute;
  left: 22%;
  display: flex;
  flex-direction: row;
  padding: 0 10.53px;
  gap: 80px;
  z-index: 1;
  height: 130px;
  top: 750px;

  .analysis-item {
    height: 130px;
    padding: 8px 0;
    cursor: pointer;

    .analysis-item-text {
      position: static;
      height: 20px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding: 0;
      gap: 8px;

      > span {
        font-family: 思源黑体;
        font-size: 14px;
        font-weight: normal;
        line-height: normal;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-feature-settings: "kern" on;
        color: #FFFFFF;
      }
    }
  }
}


</style>
